<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { Star, User, EditPen, SwitchButton } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/userStore'
import http from '@/utils/http'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 新增登出函数
const handleLogout = async () => {
  try {
    await http.post('/user/logout/')
    userStore.clearUser()
    ElMessage.success('登出成功')
    router.push('/login')
  } catch (error) {
    ElMessage.error('登出失败')
  }
}
</script>

<template>
  <el-header style="position: absolute; top: 0; left: 0; width: 100%;">
    <el-menu :default-active="route?.path" mode="horizontal" router text-color="#fff" active-text-color="#FF4500">
      <el-text style="margin: 10px; display: flex; align-items: center;" size="large" type="warning">
        <el-icon size="18" color="green">
          <Star />
        </el-icon>&nbsp;&nbsp;考研信息交流平台&nbsp;&nbsp;<el-icon size="18" color="green">
          <Star />
        </el-icon>
      </el-text>
      <el-menu-item index="/info">院校信息</el-menu-item>
      <el-menu-item index="/resource">资料共享</el-menu-item>
      <el-menu-item index="/forum">交流论坛</el-menu-item>
      <el-menu-item index="/chat">考研ai助手</el-menu-item>
      
      <!-- 新增用户菜单 --> 
      <el-sub-menu index="1" style="position: absolute; right: 0;">
        <template #title>
          <el-icon><User /></el-icon>
          <span style="margin-left: 5px;">{{ userStore.user?.username || '未登录' }}</span>
        </template>
        <el-menu-item index="profile">
          <el-icon style="color: black;"><EditPen /></el-icon>
          <el-text>信息修改</el-text> 
        </el-menu-item>
        <el-menu-item @click="handleLogout">  <!-- 移除index属性 -->
          <el-icon style="color: black;"><SwitchButton /></el-icon>
          <el-text>登出</el-text> 
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-header>
</template>

<style scoped>
.el-header {
  padding: 0;
}

.el-menu-item.is-active {
  background-color: rgba(255, 69, 0, 0.1) !important;
}

.el-menu-item:hover {
  background-color: rgba(255, 69, 0, 0.08) !important;
}

.el-sub-menu:hover {
  background-color: rgba(255, 69, 0, 0.08) !important;
}

::v-deep .el-menu--horizontal {
  --el-menu-bg-color: #1b2c3c;
}

:deep(.el-menu--horizontal) .el-menu-item:hover {
  background-color: rgba(239, 228, 224, 0.08) !important;
}
</style>